<template>
  <div style="width: 100%; height: 100%">
    <div class="qb">
      <!-- 左部 -->
      <div class="left">
        <div class="left1">
          <div class="left11">ORDER聚造</div>
          <div style="margin-left: 17px; line-height: 36px">
            <i class="el-icon-s-unfold" style="color: #ffffff"></i>
          </div>
        </div>

        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="transparent"
          text-color="#fff"
          :router="true"
          active-text-color="#ffd04b"
          style="margin-top: 25px; width: 100%"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-s-home"></i>
              <span>首页管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/index/banners" class="a1"
                >轮播图管理</el-menu-item
              >
              <el-menu-item index="/index/category" class="a1"
                >分类区管理</el-menu-item
              >
              <el-menu-item index="/index/recomend" class="a1"
                >为你推荐管理</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-s-goods"></i>
              <span>商品管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="2-1" class="a1">分类管理</el-menu-item>
              <el-menu-item index="2-2" class="a1">品牌管理</el-menu-item>
              <el-menu-item index="2-3" class="a1">商品管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-menu-item index="3">
            <i class="el-icon-s-management"></i>
            <span slot="title">商品新闻管理</span>
          </el-menu-item>
        </el-menu>
      </div>

      <!-- 右部 -->
      <div class="right">
        <div style="margin-left: 30px">
          <div class="right1">
            <b style="line-height: 51px;width:550px;margin-left:40px">{{ $route.meta.title }}</b>
            <div style="margin-left: 294px">
              <el-avatar :src="photo" :size="50"></el-avatar>
            </div>

            <!-- <div class="right12">超级管理员</div> -->
            <el-tooltip placement="bottom">
              <div
                slot="content"
                @click="dialogFormVisible = true"
                class="cursor"
              >
                修改密码
              </div>
              <span class="right12">{{ nickName }}</span>
            </el-tooltip>
            <div class="right13">小王，您好！</div>

            <el-button
              type="danger"
              round
              @click="logout"
              size="small"
              icon="el-icon-switch-button"
              class="ad"
              >退出</el-button
            >
            <!-- <el-button type="danger" class="ad" round style="display: flex" @click="logout">
              <i
                class="el-icon-switch-button"
              ></i>
              退出
            </el-button> -->
          </div>

          <div style="margin-top:20px">
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>

    <el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="400px">
      <el-form :model="form" ref="form" :rules="rules" label-width="100px">
        <el-form-item label="原密码" prop="passWord">
          <el-input type="password" v-model="form.passWord"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassWord">
          <el-input type="password" v-model="form.newPassWord"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="reNewPassWord">
          <el-input type="password" v-model="form.reNewPassWord"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          @click="dialogFormVisible = false"
          style="width: 50px; height: 30px"
          >取 消</el-button
        >
        <el-button
          @click="changePassWord"
          type="primary"
          style="width: 50px; height: 30px"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>

  <!-- <router-link to="/login">go to login</router-link> -->
</template>

<script>
import md5 from "js-md5";

export default {
  name: "index",
  components: {},
  data() {
    return {
      dialogFormVisible: false,
      photo: "",
      nickName: "",
      value1: "",
      form: {
        passWord: "",
        newPassWord: "",
        reNewPassWord: "",
      },
      group: {
        //选中的数组
        groupId: "",
        groupName: "",
      },
      menus: [], //菜单树
      rules: {
        passWord: [
          { require: true, $message: "请输入原密码", trigger: "blur" },
        ],
        newPassWord: [
          { require: true, $message: "请输入新密码", trigger: "blur" },
        ],
        reNewPassWord: [
          { require: true, $message: "请重复输入新密码", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请再次输入密码"));
              } else if (value !== this.form.newPassWord) {
                callback(new Error("两次输入密码不一致!"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },

  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    logout() {
      this.$confirm("是否退出登录？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$http({
          url: "/admin/logout",
        }).then((res) => {
          if (res.errorMsg) {
            this.$message.error(res.errorMsg);
          } else {
            localStorage.removeItem("token");
            localStorage.removeItem("user");
            location.href = "#/login";
          }
        });
      });
    },
    changePassWord() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$http({
            url: "/admin/changePassWord",
            method: "POST",
            data: {
              passWord: md5(this.form.passWord),
              newPassWord: md5(this.form.newPassWord),
              // userName: this.form.userName,
            },
          }).then((res) => {
            if (!res.errorMsg) {
              //this.dialogFormVisible = false
              this.$message({
                message: "修改密码成功",
                type: "success",
                duration: 3000,
              });

              setTimeout(() => {
                location.href = "#/login";
              }, 3000);
            }
          });
        } else {
          return false;
        }
      });
    },
  },
  created() {
    console.log(this.$route);
    console.log("~~~~~~~~~");
    console.log(this.$router);

    //从缓存获取登录用户信息
    let user = localStorage.getItem("user");
    if (!user) {
      //this.$router.push('/login')
      console.log(history, location);
      location.href = location.origin + "#/login";
      //history.reload
    } else {
      //解析为对象
      user = JSON.parse(user);
      //设置头像
      this.photo = user.avatarUrl || require("../assets/touxiang.png");
      //设置昵称
      this.nickName = user.nickName || "小王";
      //获取菜单
      //this.getMenus()
    }
  },
  mounted() {},
};
</script>

<style scoped>
* {
  margin: 0; /* 去除外边距和内边距 */
  padding: 0;
}

.qb {
  width: 100%;
  height: 100%;
  display: flex;
}

/* 左部 */
.left {
  width: 15%;
  height: 100%;
  top: 0;
  left: 0;
  overflow-x: hidden;
  background-image: url(../assets/tu.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: fixed;
}

.left1 {
  width: 100%;
  height: 30px;
  display: flex;
}

.left11 {
  width: 130px;
  height: 24px;
  font-size: 19px;
  font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
  font-weight: normal;
  color: #ffffff;
  padding-top: 6px;
  margin-left: 40px;
}

.a1 {
  margin-left: 10px;
}

.left2 {
  width: 186px;
  margin-left: 36px;
  margin-top: 26px;
  height: 100%;
}

.boxes {
  flex-direction: column;
  justify-content: space-around;
}

.box {
  width: 100%;
  height: 20px;
  margin-top: 23px;
}

.box1 {
  display: flex;
}

.tu2 {
  width: 16px;
  height: 16px;
}

.left21 {
  margin-left: 8px;
  height: 19px;
  font-size: 15px;
  font-family: MicrosoftYaHeiUI-, MicrosoftYaHeiUI;
  font-weight: normal;
  color: #aaaaaa;
}

.tu3 {
  width: 10px;
  height: 5px;
  margin-left: 80px;
  margin-top: 7px;
}

.box2 {
  margin-top: 34px;
  margin-left: 30px;
  font-size: 15px;
  font-family: MicrosoftYaHeiUI-, MicrosoftYaHeiUI;
  font-weight: normal;
  color: #aaaaaa;
}

.box21 {
  margin-left: 8px;
  height: 18px;
  display: flex;
  margin-top: 35px;
  border-right: 4px solid rgb(44, 44, 44);
  right: 15px;
  position: relative;
}

.box21.active {
  color: #ffffff;
  border-right: 4px solid #ed0606;
}

.tu4 {
  width: 7px;
  height: 38px;
  margin-left: 174px;
}

/* 右部 */
.right {
  background-color: #eff6fc;
  margin-left: 15%;
  width: 85%;
  overflow-x: hidden;
}

.right1 {
  margin-top: 28px;
  display: flex;
  width: 100%;
  height: 51px;
  position: flexd;
}

.ad {
  width: 75px;
  height: 35px;
  margin-top: 8px;
  justify-content: center; /* 垂直横向居中，必须结合flex */
  align-items: center;
}

.right11 {
  margin-left: 35px;
  margin-top: 13px;
  width: 154px;
  height: 21px;
  font-size: 17px;
  font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
  font-weight: normal;
  color: #2c2c2c;
}

.tu5 {
  width: 51px;
  height: 51px;
  margin-left: 708px;
}

.right12 {
  margin-left: 8px;
  color: #eab924;
  margin-top: 15px;
  height: 20px;
  font-size: 15px;
  font-family: MicrosoftYaHei-, MicrosoftYaHei;
  font-weight: normal;
}

.right13 {
  margin-left: 5px;
  margin-top: 15px;
  height: 20px;
  font-size: 15px;
  font-family: MicrosoftYaHei-, MicrosoftYaHei;
  font-weight: normal;
  color: #2c2c2c;
}

.right14 {
  width: 75px;
  height: 31px;
  background: #f56c6c;
  border-radius: 15px 15px 15px 15px;
  opacity: 1;
  margin-left: 4px;
  margin-top: 11px;
  display: flex;
}

.tu6 {
  width: 15px;
  height: 15px;
  margin-top: 7px;
  margin-left: 8px;
}

.right141 {
  margin-left: 8px;
  margin-top: 6px;
  width: 75px;
  height: 47px;
  font-size: 13px;
  font-family: MicrosoftYaHei-, MicrosoftYaHei;
  font-weight: normal;
  color: #ffffff;
}

</style>